<template>
    <div>
        <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 产品 </el-col>
                        <el-col :span="16">
                            <el-input v-model="ser.name" placeholder="请输入内容" clearable></el-input>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="4">

                    <el-button @click="search" class="add_btn" icon="el-icon-search">
                        搜索</el-button>
                    <el-button @click="searchreset" class="add_btn">
                        重置</el-button>
                    <el-button @click="add_product" icon="el-icon-plus" class="add_btn">新增产品</el-button>
                    <el-button @click="get_xinghao" class="add_btn">型号管理</el-button>
                    <el-button @click="get_guige" class="add_btn">规格管理</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="dataList" stripe style="width: 100%" border>
            <el-table-column prop="id" label="ID" width="60"> </el-table-column>
            <el-table-column prop="name" label="产品">
            </el-table-column>
            <el-table-column prop="model_num" label="型号数量">
            </el-table-column>
            <el-table-column prop="kucun_num" label="库存数量"> </el-table-column>

            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="get_modenumber(scope.row)" type="text" icon="el-icon-edit">型号关联</el-button>
                    <el-button @click="set_product(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>

                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                        title="是否删除这条数据？" @confirm="del_product(scope.row)">
                        <el-button slot="reference" type="text" icon="el-icon-delete">
                            删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                @prev-click="prev" @next-click="next" :current-page.sync="pagination.page"
                :page-size="pagination.per_page" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>


        <!-- 型号管理 -->
        <el-dialog :title="title" :visible.sync="is_modenumber" width="60%" :close-on-click-modal="false"
            @close="close_dialog">
            <el-form label-width="80px" class="demo-ruleForm">
                <el-row>
                    <el-col style="display: flex; align-items: center;">
                        <el-form-item label="规格名称">
                            <el-input v-model="modenumber_name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="规格名称">
                            <el-button type="primary" style="margin-left: 20px;"
                                @click="add_modenumber()">添加型号</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="modenumber_list" stripe style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                <el-table-column prop="name" label="型号 "> </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="set_modenumber(scope.row)" style="margin-right: 20px;" type="text">
                            编辑</el-button>
                        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定删除此数据吗？" @confirm="del_modenumber(scope.row.id)">
                            <el-button slot="reference" size="small" type="text">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="is_modenumber = false">确定</el-button>
            </span>
        </el-dialog>

        <!-- 规格管理 -->
        <el-dialog :title="title" :visible.sync="is_Specification" width="60%" :close-on-click-modal="false"
            @close="close_dialog_is_Specification">

            <el-form label-width="80px" class="demo-ruleForm">
                <el-row>
                    <el-col style="display: flex; align-items: center;">
                        <el-form-item label="规格名称">
                            <el-input v-model="Specification_name" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="add_Specification">添加规格</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="SpecificationList" stripe style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                <el-table-column prop="name" label="规格 "> </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="set_Specification(scope.row)" style="margin-right: 20px;" type="text">
                            编辑</el-button>
                        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定删除此数据吗？" @confirm="del_Specification(scope.row.id)">
                            <el-button slot="reference" size="small" type="text">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="is_Specification = false">确定</el-button>
            </span>
        </el-dialog>

        <!-- 产品关联型号 -->
        <el-dialog :title="title" :visible.sync="isProduct_modenumber" width="60%" :close-on-click-modal="false"
            @close="close_dialog">
            <el-form label-width="80px" class="demo-ruleForm">
                <el-row>
                    <el-col style="display: flex; align-items: center;">
                        <el-form-item label="产品名称" prop="name">
                            <el-input disabled v-model="glxh.product_name"></el-input>
                        </el-form-item>
                        <el-form-item label="型号名称" prop="name">
                            <el-select v-model="glxh.model_ids" multiple clearable filterable placeholder="请选择">
                                <el-option v-for="item in OutModelList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="add_OutProductModel()">关联提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="out_modenumber" stripe style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                <el-table-column prop="name" label="型号 ">
                    <template slot-scope="scope">
                        {{scope.row.outsource_model.name}}
                    </template>
                 </el-table-column>
                <el-table-column prop="sp_num" label="规格数量"> </el-table-column>
                <el-table-column prop="kucun_num" label="库存数量"> </el-table-column>

                 
                 <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="set_OutProductModelsp(scope.row)" style="margin-right: 20px;" type="text">
                            关联规格</el-button>
                        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定移除此数据吗？" @confirm="del_OutProductModel(scope.row.id)">
                            <el-button slot="reference" size="small" type="text">移除关联</el-button>
                        </el-popconfirm>
                    </template>
                 </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isProduct_modenumber = false">取 消</el-button>
                <el-button type="primary" @click="submitadd('ruleForm')">确定</el-button>
            </span>
        </el-dialog>
        
        
         <!-- 产品---关联型号---关联规格 -->
         <el-dialog :title="title" :visible.sync="isProduct_modenumber_Specification" width="60%" :close-on-click-modal="false"
            @close="close_dialogSpecification">
            <el-form label-width="80px" class="demo-ruleForm">
                <el-row>
                    <el-col style="display: flex; align-items: center;">
                        <el-form-item label="产品" prop="name">
                            <el-input disabled v-model="glguige.product_name"></el-input>
                        </el-form-item>
                        <el-form-item label="型号" prop="name">
                            <el-input disabled v-model="glguige.modenumber_name"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="规格" prop="name">
                            <el-select v-model="glguige.sp_ids" multiple clearable filterable placeholder="请选择">
                                <el-option v-for="item in NoSpecificationList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="add_OutProductSpecification()">关联提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="modenumber_Specificationlist" stripe style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                <el-table-column prop="name" label="规格 ">
                    <template slot-scope="scope">
                        {{scope.row.outsource_model.name}}
                    </template>
                 </el-table-column>
                <el-table-column prop="kucun_num" label="库存数量"> </el-table-column>
                 <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="set_OutProductModel(scope.row)" style="margin-right: 20px;" type="text">
                            关联规格</el-button>
                        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定移除此数据吗？" @confirm="del_OutProductSpecification(scope.row.id)">
                            <el-button slot="reference" size="small" type="text">移除关联</el-button>
                        </el-popconfirm>
                    </template>
                 </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary"  @click="isProduct_modenumber_Specification = false">确定</el-button>
            </span>
        </el-dialog>


        <!-- 新增产品 -->
        <el-dialog :title="title" :visible.sync="isProduct" width="20%" :close-on-click-modal="false"
            @close="close_dialog">
            <el-input v-model="product_name"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isProduct = false">取 消</el-button>
                <el-button type="primary" @click="submita_addproduct()">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {
    getOutProductList,
    editOutProduct,
    delOutProduct,
    getOutModelList,
    editOutModel,
    delOutModel,
    getOutModelListByProductId,
    getOutModelListNoRelation,
    getOutSpecificationList,
    editOutSpecification,
    delOutSpecification,
    addOutProductModel,
    delOutProductModel,
    getOutSpecificationListByProductId,
    getOutSpecificationNoRelation,
    addOutProductSpecification,
    delOutProductSpecification
    
} from "@/api/product/index";
export default {
    data() {
        return {
            glguige:{
                model_id: '',
                product_id: '',
                product_name:'',
                modenumber_name:'',
                sp_ids:[]
            },
            isProduct_modenumber_Specification:false,
            modenumber_Specificationlist: [],
            NoSpecificationList:[],
            glxh: {
                product_name: "",
                model_ids: [],
                product_id: ''
            },
            gl_modenumber_name: "",
            gl_product_name: "",
            is_Specification: false,
            Specification_name: "",
            Specification_id: "",
            SpecificationList: [],
            product_name: "",
            product_id: "",
            is_modenumber: false,
            modenumber_list: [],
            OutModelList: [],
            modenumber_name: '',
            modenumber_id: '',
            out_modenumber: [],
            ser: {
                name: "",
            },
            title: "",
            isProduct: false,
            isProduct_modenumber: false,
            dataList: [],
            pagination: {
                per_page: 10,
                page: 1,
            },
            total: 0,
            productList: [],
            ColorList: [],
        };
    },
    mounted() {
        this.getlist();
    },
    methods: {
        close_dialogSpecification(){
            this.glguige={
                model_id: '',
                product_id: '',
                product_name:'',
                modenumber_name:'',
                sp_ids:[]
            }
        },
        del_OutProductSpecification(id){
            delOutProductSpecification({id}).then(res=>{
                if(res.code==200){
                    this.$message.success("移除成功")
                    this.modenumber_Specificationlist=[]
                    let obj={
                        product_id:this.glguige.product_id,
                        model_id:this.glguige.model_id
                    }
                    this.glguige.sp_ids=[]
                    this.get_OutSpeificationNoRelation(obj)
                    this.get_OutSpecificationListByProductId(obj)
                }
            })
        },
        add_OutProductSpecification(){

            if(this.glguige.sp_ids.length==0){
                 this.$message.error("请选择规格")
                return false
            }
            
            addOutProductSpecification(this.glguige).then(res=>{
                if(res.code==200){
                    this.$message.success("关联成功")
                    this.modenumber_Specificationlist=[]
                    let obj={
                        product_id:this.glguige.product_id,
                        model_id:this.glguige.model_id
                    } 
                    this.glguige.sp_ids=[]
                    this.get_OutSpeificationNoRelation(obj)
                    this.get_OutSpecificationListByProductId(obj)
                }
            })
        },
        set_OutProductModelsp(row){
            let obj={
                product_id:row.product_id,
                model_id:row.model_id
            }    
            this.glguige.product_id=row.product_id
            this.glguige.product_name=this.glxh.product_name
            this.glguige.modenumber_name=row.outsource_model.name
            this.glguige.model_id=row.model_id
            this.isProduct_modenumber_Specification=true
           
            this.get_OutSpeificationNoRelation(obj)
            this.get_OutSpecificationListByProductId(obj)
        },
        get_OutSpecificationListByProductId(obj){
            getOutSpecificationListByProductId(obj).then(res=>{
                if(res.code==200){
                    this.modenumber_Specificationlist=res.data
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        get_OutSpeificationNoRelation(obj){
            getOutSpecificationNoRelation(obj).then(res=>{
                if(res.code==200){
                    this.NoSpecificationList=res.data
                }else{
                    this.$message.error(res.msg)
                }
            })              
        },
        submita_addproduct() {
            editOutProduct({
                id: this.product_id,
                name: this.product_name
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("修改成功")
                    this.isProduct = false
                    this.dataList = []
                    this.getlist()
                }
            })
        },
        add_product() {
            this.title = "新增产品"
            this.isProduct = true
        },
        set_modenumber(row) {
            this.modenumber_name = row.name
            this.modenumber_id = row.id
        },
        close_dialog_is_Specification() {
            this.is_Specification = false;
            this.SpecificationList = []
            this.Specification_name = ""
            this.Specification_id = ""
        },
        del_Specification(id) {
            delOutSpecification({
                id
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("删除型号成功")
                    this.SpecificationList = []
                    getOutSpecificationList().then((res) => {
                        if (res.code == 200) {
                            this.SpecificationList = res.data.data;
                        }
                    });
                }
            })
        },
        set_Specification(row) {
            this.Specification_name = row.name
            this.Specification_id = row.id
        },
        add_Specification() {
            editOutSpecification({ id: this.Specification_id, name: this.Specification_name }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("添加规格成功")
                    this.SpecificationList = []
                    this.Specification_name = ""
                    this.Specification_id = ""
                    getOutSpecificationList().then((res) => {
                        if (res.code == 200) {
                            this.SpecificationList = res.data.data;
                        }
                    });
                }
            })
        },
        get_guige() {
            getOutSpecificationList().then((res) => {
                if (res.code == 200) {
                    this.SpecificationList = res.data.data;
                    this.is_Specification = true;
                }
            });
        },
        // 获取型号列表
        get_xinghao() {
            getOutModelList().then((res) => {
                if (res.code == 200) {
                    this.modenumber_list = res.data.data;
                    this.is_modenumber = true;
                }
            });
        },
        del_modenumber(id) {
            delOutModel({
                id
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.modenumber_list = []
                    getOutModelList().then((res) => {
                        if (res.code == 200) {
                            this.modenumber_list = res.data.data;
                        }
                    })
                }
            })
        },
        // 添加型号
        add_modenumber() {
            if (this.modenumber_name == "") {
                this.$message.error("请输入型号名称");
                return false
            } else {
                editOutModel({
                    name: this.modenumber_name,
                    id: this.modenumber_id
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("提交成功");
                        this.modenumber_list = []
                        this.modenumber_name = ''
                        this.modenumber_id = ''
                        getOutModelList().then((res) => {
                            if (res.code == 200) {
                                this.modenumber_list = res.data.data;
                            }
                        });
                    }
                })
            }
        },
        del_OutProductModel(id){
            delOutProductModel({
                id
            }).then(res=>{
                if(res.code == 200){
                    this.$message.success("移除成功")
                    let row = {
                        id: this.glxh.product_id,
                        name: this.glxh.product_name
                    }
                    this.get_modenumber(row)
                }
               
            })
        },
        add_OutProductModel() {
            if (this.glxh.model_ids.length == 0) {
                this.$message.error("请选择型号");
                return false
            }
            addOutProductModel(this.glxh).then((res) => {
                if (res.code == 200) {
                    this.$message.success("关联成功")
                    this.glxh.model_ids = []
                    let row = {
                        id: this.glxh.product_id,
                        name: this.glxh.product_name
                    }
                    this.get_modenumber(row)
                }
            })
        },
        get_modenumber(row) {
            getOutModelListByProductId({
                product_id: row.id
            }).then((res) => {
                if (res.code == 200) {
                    this.glxh.product_name = row.name
                    this.glxh.product_id = row.id
                    this.out_modenumber = res.data;
                    this.isProduct_modenumber = true;
                    getOutModelListNoRelation({ product_id: row.id }).then((res) => {
                        if (res.code == 200) {
                            this.OutModelList = res.data;
                        }
                    });
                }
            });
        },
        product_id_change(val) {
            this.ColorList = [];
            this.get_produccolor(val);
        },
        get_produccolor(id) {
            getProductColorList({ product_id: id }).then((res) => {
                if (res.code == 200) {
                    this.ColorList = res.data;
                }
            });
        },
        close_dialog() {
            this.isProduct = false;
            this.product_name = "";
            this.product_id = "";
        },
        del_product(row) {
            delOutProduct({
                id: row.id,
            }).then((res) => {
                if (res.code == 200) {
                    this.isProduct = false;
                    this.$message.success("提交成功");
                    this.getlist();
                }
            });
        },
        getlist() {
            getOutProductList({ ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
        set_product(row) {
            this.product_id = row.id;
            this.product_name = row.name;
            this.title = "产品编辑";
            this.isProduct = true;
        },
        submitadd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    editOutProduct(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.isProduct = false;
                            this.$message.success("提交成功");
                            this.getlist();
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.getlist();
        },
        prev() {
            this.pagination.page = this.pagination.page - 1;
            this.getlist();
        },
        next() {
            this.pagination.page = this.pagination.page + 1;
            this.getlist();
        },
        search() {
            this.pagination = {
                per_page: 10,
                page: 1,
            };
            getOutProductList({ ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
        searchreset() {
            this.ser = {}
            this.search()
        },
    },
};
</script>

<style></style>